<template>
    <div id="hd">
        <div id="nextopsxx"></div>
        <div class="nex_common_top">
            <div class="w1200">
                <div class="nex_common_top_L">
                    您好，欢迎来到<em class="active">写益文荟</em>！<em @click="suggest" style="cursor: pointer" class="active">建言建议</em>
                </div>
                <div class="nex_common_top_R" style="display: flex;align-items: center;">
                    <template v-if="!$store.getters.token">

                          <div class="nex_commoniterms" @click="loginShow">
                            <div><a href="javascript:;" class="signin-loader" style="color: #F83138FF;font-size: 20px;font-weight: 600" >微信登录</a></div>
                            <div style="padding: 0 8px;">|</div>
                            <div>
                              <a href="javascript:;" class="signin-loader" style="color: #F83138FF;font-size: 20px;font-weight: 600" >扫码注册</a>
                            </div>
                          </div>

                          <!--<div><a href="javascript:;" class="signin-reg"><em class="active">会员注册</em></a></div>-->
                          <div style="padding: 0 8px;">|</div>
                          <div><a href="javascript:;" class="signin-loader" style="color: #F83138FF;font-size: 20px;font-weight: 600" @click="mobileLoginShow">手机登录</a></div>

                          <div class="clear"></div>

                    </template>
                    <template v-else>
                        <div class="nex_commoniterms" >
                            <div>
                                <a href="javascript:;" class="signin-loader">
                                    {{$store.getters.userInfo.nick_name}}
                                    <template v-if="$store.getters.userInfo&&$store.getters.userInfo.member_type_name">
                                        ({{$store.getters.userInfo.member_type_name}})
                                    </template>

                                </a>
                            </div>
                            <div style="padding: 0 8px;">|</div>
                            <template v-if="$store.getters.userInfo&&$store.getters.userInfo.expire_days>0">
                                <div  :style="{'color':$store.getters.userInfo.expire_days<=3?'red':''}" >
                                    还有：{{$store.getters.userInfo.expire_days}} 天过期
                                </div>
                                <div style="padding: 0 8px;">|</div>
                            </template>

                            <div><a href="javascript:;" class="signin-reg"  @click="favorite"><em class="active" >我的收藏</em></a></div>
                            <div style="padding: 0 8px;">|</div>
                            <div><a href="javascript:;" class="signin-reg"  @click="mobileSetShow"><em class="active" >设置手机号</em></a></div>
                            <div style="padding: 0 8px;">|</div>
                            <div><a href="javascript:;" class="signin-reg"><em class="active" @click="exitLogin">退出登录</em></a></div>

                            <div class="clear"></div>
                        </div>
                    </template>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="nexheader">
            <div class="w1200">
                <div class="nexlogo" style="margin-top: -9px" >
                    <a href="/" title="写益文荟">
                      <!--<img style="width: 200px;height: 90px" src="/static/picture/xieyiwenhui.png" alt="写益文荟" border="0">-->
                      <img style="margin-left:70px;width: 137px;height: 130px" src="/static/picture/xieyiwenhui.png" alt="写益文荟" border="0">
                    </a>
                </div>

                <div class="nexsearch" style="margin-left: -56px">
                    <div class="search-box">
                        <div id="scbar" class="sehbom">
                            <div class="nex_scbar">
                                <div class="nex_scbar_type_td"><a href="javascript:;" id="scbar_type" class="xg1">公文</a></div>
                                <div class="nex_scbartxt">

                                    <el-input v-model="keyword" style="width: 100%;border:0px;" placeholder="支持多个关键词空格隔开搜索，如:领导 发言"></el-input>
                                    <!--                  <input type="text" value="" class="scbar_txt" id="names1" placeholder="输入关键词，多个关键词用空格分开">-->
                                </div>
                                <div class="nex_scbar_btn" @click="search" style="cursor: pointer">
                                    <div name="searchsubmit" id="search1" class="scbar_btn actives"></div>
                                </div>

                                <div class="clear"></div>
                            </div>
                        </div>
                      <button style="height: 44px;font: 16px/1.5 Microsoft YaHei,PingFang,Heiti SC" @click="exchangeCode" class="vip">兑换码开通</button>
                        <router-link class="vip" style="margin-left: 11px" title="自助开通" target="_blank" tag="a" to="/vip">自助开通</router-link>


                    </div>

                    <div class="scbar_hot_td">热门搜索：
                        <template v-if="pathName=='list'">
                            <a style="cursor: pointer" v-for="(item,index) in homeData.hotWords" :key="index" @click="hotSearch(item)" >
                                <span style="color: #F83138FF" >{{item}}</span>
                            </a>
                        </template>
                        <template v-else>
                            <router-link  target="_blank" tag="a" v-for="(item,sindex) in homeData.hotWords" :key="sindex" :to="'/list/38?keyword='+item">
                                <span style="color: #F83138FF" >{{item}}</span>
                            </router-link>
                        </template>
                    </div>
                </div>

                <div class="clear"></div>
            </div>
        </div>
        <div id="nex_top_nav">
            <div class="w1200">
                <div class="nex_Nav_box">
                    <ul>
                        <li><a href="/" title="写益文荟" class="actives">平台首页</a></li>
                        <li><a href="/list/2" target="_blank">调研—考察—报告</a></li>
                        <li><a href="/list/3" target="_blank">工作计划—要点</a></li>
                        <li><a href="/list/6" target="_blank">实施方案—制度</a></li>
                        <li><a href="/list/9" target="_blank">研讨—心得体会</a></li>
                        <li><a href="/list/13" target="_blank">党建分类汇总</a></li>
<!--                        <li><a href="/list/39" target="_blank">党建PPT汇总</a></li>-->
                        <li><a href="/list/11" target="_blank">座谈—经验—发言</a></li>
                        <li><a href="/list/10" target="_blank">征文—演讲—致辞</a></li>
                    </ul>
                    <!--
                    <ul>
                        <li><a href="/" title="写益文荟" class="actives">平台首页</a></li>
                        <li><a href="/list/2" target="_blank">各级领导讲话</a></li>
                        <li><a href="/list/3" target="_blank">计划总结汇报</a></li>
                        <li><a href="/list/6" target="_blank">实施方案制度</a></li>
                        <li><a href="/list/9" target="_blank">研讨心得体会</a></li>
                        <li><a href="/list/13" target="_blank">党建分类汇总</a></li>
                        <li><a href="/list/39" target="_blank">PPT分类汇总</a></li>
                        <li><a href="/list/11" target="_blank">座谈经验发言</a></li>
                        <li><a href="/list/10" target="_blank">征文演讲致辞</a></li>
                    </ul>
                    -->
                </div>

<!--                <div class="nex_nav_focus">
                    <i class="myfont active">&#xe690;</i>
                    <span class="myfont active">&#xe6c2;</span>
                    <div class="nex_nav_focusinter">
                        <p>扫一扫</p>
                        <p>关注官方微信</p>
                        <div class="nex_nav_focus_ewm"><img src="/static/picture/wechat.png"></div>
                    </div>
                </div>-->
                <div class="clear"></div>
            </div>
        </div>
        <Login v-model:visible="showLogin" @success="loginSuccess"></Login>
        <MobileLogin v-model="showMobileLogin" v-if="showMobileLogin"></MobileLogin>
        <MobileSet v-model="showMobileSet" v-if="showMobileSet"></MobileSet>
    </div>


</template>

<script>
    import Login from "@/components/Login.vue";
    import MobileLogin from "@/components/MobileLogin.vue";
    import MobileSet from "@/components/MobileSet.vue";
    import { mapState, mapActions, mapGetters,mapMutations } from "vuex";
    export default {
        name: "Header",
        model: {
            prop: 'visible',
            event: 'change'
        },
        components:{
            Login,
            MobileLogin,
            MobileSet
        },
        props: {
            visible: Boolean
        },
        data() {
            return {
                content:'',
                // classifies:[],
                // hotWords:[],
                pathName:'',
                keyword:'',
                showLogin:false,
                showMobileLogin:false,
                showMobileSet:false,
            };
        },
        watch: {
            visible(newName, oldName) {
                if(newName){

                }
            }
        },
        created(){
            this.$watch(
                () => this.$route.params,
                () => {
                    this.pathName=this.$route.name;
                    if(this.pathName=='list'){
                        if(this.$route.query.keyword){
                            this.keyword=this.$route.query.keyword;
                        }else{
                            this.keyword='';
                        }
                    }
                },
                // 组件创建完后获取数据，
                // 此时 data 已经被 observed 了
                { immediate: true }
            )
            this.$store.dispatch('user/updateHomeData');
        },
        computed: {
          ...mapGetters(["homeData"]),

        },
        methods: {

            exchangeCode(){

              if(!this.$store.getters.token){
                this.$message.error("亲，右上角~~请先微信扫码登录！")
                return;
              }

              let exchangeCode = prompt("请输入购买的兑换码:")
              const url = process.env.VUE_APP_API_HOST+"/api/exchangeCode?exchangeCode="+exchangeCode;
              if(exchangeCode==null || exchangeCode=="" || exchangeCode==undefined){
                this.$message.error('亲~~ 请输入兑换码！')
                return;
              }

              if(exchangeCode!=null && exchangeCode!=""){
                this.$axios.get(url).then(res=>{
                  if(res.flag==1 || res.flag==2){
                    this.$message.error(res.msg)
                  }else{
                    console.log(res)
                    this.$message.success(res.records.msg)
                    window.location.reload();
                  }


                })
              }

            },
            favorite(){
              const id = this.$store.getters.userInfo.id
              let routeUrl =this.$router.resolve({ path: `/favorite-list/${id}` })
              window.open(routeUrl.href, "_blank");
            },

            suggest(){
              let content = prompt("请写下您的建议:")
              const url = process.env.VUE_APP_API_HOST+"/api/suggest?content="+content;
              if(content!=null && content!=""){
                this.$axios.get(url).then(res=>{
                  this.$message.success('感谢您的宝贵建议！')
                })
              }

            },

            exitLogin(){
                this.$store.dispatch('user/updateUserInfo', null)
                this.$store.dispatch('user/updateToken', null)
            },

            loginSuccess(){

            },
            loginHide(){
                this.showLogin=false;
                clearInterval(this.qr_code_time);
            },
            loginShow(){
                this.showLogin=true;
            },
            mobileLoginShow(){
              this.showMobileLogin=true;
            },
            mobileSetShow(){
              this.showMobileSet=true;
            },
            hotSearch(keyword){
                this.keyword=keyword;
                this.search();
            },
            search(){
                console.log(this.keyword)

                if(this.pathName=='list'){
                    let channelId=this.$route.params.id;
                    let sonid=this.$route.params.sonid;
                    let path="";
                    if(channelId){
                        if(sonid){
                            path=`/list/${channelId}/${sonid}?keyword=${this.keyword}`
                        }else{
                            path=`/list/${channelId}?keyword=${this.keyword}`
                        }
                    }else{
                        path=`/list/38?keyword=${this.keyword}`
                    }
                    this.$router.push({ path: path })
                }else{
                    let routeUrl =this.$router.resolve({ path: `/list/38?keyword=${this.keyword}` })

                    window.open(routeUrl.href, "_blank");
                }

            },
        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.nex_Nav_box ul li a{
  font-size: 13px;
}
</style>
